<template>
  <div id="app">
    <div class="portrait">
      <img src="../../assets/images/portrait.png" alt="">
    </div>
    <ul>
      <li>
        <span class="grayColor">昵称</span>
        <input type="text" placeholder="请输入昵称" v-model="nickName">
      </li>
      <!--      <li class="clearfix">
              <span class="grayColor">性别</span>
              <div>
              <div class="fl" @click="_toggleGender">
                <i :class="{'active':isMale}"></i>
                <span :class="{'active':isMale}">男性</span>
              </div>
              <div class="fl" @click="_toggleGender">
                <i :class="{'active':!isMale}"></i>
                <span :class="{'active':!isMale}">女性</span>
              </div>
              </div>
            </li>-->
      <li>
        <span class="grayColor">手机号</span>
        <input type="text" placeholder="请输入手机号" v-model="mobile" maxlength="11"
               oninput="value=value.replace(/[^\d]/g,'')">
      </li>
      <li>
        <span class="grayColor">密码</span>
        <input type="password" placeholder="请输入密码" v-model="password">
      </li>
      <li>
        <span class="grayColor">推荐码</span>
        <input type="text" placeholder="如无推荐码可跳过" v-model="recommendation">
      </li>
    </ul>
    <a class="btn register" @click="_register">注册</a>
    <p>点击登陆，即表示阅读并同意<span @click="_serviceAgreement">《商城服务协议》</span></p>
    <Protocol :message.sync="isShow"></Protocol>
  </div>
</template>

<script>
  import Protocol from '../commonList/Protocol'
  import  {isCorrectPhoneNumber} from '../../assets/js/commom'
  export default {
    name: "register",
    components: {
      Protocol
    },
    data() {
      return {
        // isMale: true,
        isShow: false,
        nickName: '',
        mobile: '',
        password: '',
        recommendation: '',
        uaCode: ''
      }
    },
    computed: {
      // _gender(){
      //   return this.isMale ? '男' : '女'
      // }
    },
    methods: {
      // _toggleGender() {
      //   this.isMale = !this.isMale;
      //   // console.log(this.gender)
      // },
      _serviceAgreement() {
        this.isShow = !this.isShow
      },
      _register() {
        if (!this.nickName) {
          this.$Toast('昵称不能为空')
          return
        }
        if (!this.mobile) {
          this.$Toast('手机号不能为空')
          return
        }
        if (!isCorrectPhoneNumber(this.mobile)) {
          this.$Toast('请输入正确的手机格式')
          return
        }
        if (!this.password) {
          this.$Toast('密码不能为空')
          return
        }
        if (this.password.length < 6) {
          this.$Toast('密码不能小于六位数')
          return
        }
        this.$Indicator.open({
          text: 'Loading...',
          spinnerType: 'fading-circle'
        });
        let _this = this
        let params = {
          nickName: this.nickName,
          mobile: this.mobile,
          password: this.password,
          recommendation: this.recommendation,
          uaCode: this.mobile,
        };
        this.$http.post('user/api/user/register', params)
          .then(function (response) {
            _this.$Indicator.close()
            if (response.data.rc == 200) {
              _this.$router.push('/login' )
            }else {
              _this.$Toast(response.data.msg)
            }
          })
          .catch(function (error) {
            _this.$Indicator.close()
            console.log(error)
          });
      }
    }
  }
</script>

<style scoped lang="less">
  #app {
    padding: 0 1.5rem;
    .portrait {
      border-radius: 50%;
      width: 2.794rem;
      margin: 3rem auto 1rem;
    }
    ul {
      li {
        display: flex;
        height: 2.34rem;
        border-bottom: 1px solid #dcdcdc;
        font-size: 0.597rem;
        span {
          flex: 2;
          line-height: 2.34rem;
        }
        input {
          height: 100%;
          border: 0;
          outline: none;
          flex: 8;
        }
        &:nth-of-type(2) {
          div {
            flex: 8;
            i {
              width: 0.45rem;
              height: 0.45rem;
              background: #ececec;
              float: left;
              border-radius: 50%;
              margin: 1rem 0.3rem 0 0.21rem;
              &.active {
                background: #ff9500;
              }
            }
            span {
              font-size: 0.597rem;
              color: #736f6f;
              line-height: 2.34rem;
              &.active {
                color: #ff9500;
              }
            }
            &:nth-of-type(2) {
              margin-left: 1rem;
            }
          }
        }
      }
    }
    p {
      font-size: 0.426rem;
      span {
        color: #ff9500;
      }
    }
    .protocol {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, .4);
      display: none;
      .content {
        width: 12rem;
        height: 16rem;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        h1 {
          text-align: center;
          padding: 0.5rem 0;
          font-size: 0.725rem;
        }
        .txtBox {
          text-align: justify;
          height: 10.5rem;
          overflow: scroll;
          p {
            text-indent: 2em;
            font-size: 0.47rem;
            line-height: 0.768rem;
            padding: 0 1rem;
          }
        }
        .choose {
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          p {
            color: #ff9500;
            font-size: 0.49rem;
            line-height: 1.77rem;
            position: relative;
            padding-left: 0.65rem;
            i {
              position: absolute;
              width: 0.65rem;
              height: 0.65rem;
              background: url("../../assets/images/check.png");
              background-size: 100%;
              left: 2.8rem;
              top: 0.5rem;
            }
          }
          div {
            line-height: 1.77rem;
            border-top: 1px solid #c8c8c8;
            display: flex;
            text-align: center;
            a {
              flex: 1;
              font-size: 0.64rem;
              &:nth-of-type(2) {
                border-left: 1px solid #c8c8c8;
              }
            }
          }
        }
      }
    }
    .register {
      margin: 0.8rem auto 0.576rem;
    }
  }
</style>
